<template>
  <div class="count">
    <i @click="handleChange(-1)">-</i>
    <span>{{ currentValue }}</span>
    <i @click="handleChange(1)">+</i>
  </div>
</template>

<script>
export default {
  name: 'countInput',
  props: {
    value: {
      type: Number
    },
    max: {
      type: Number,
      default: 100
    },
    min: {
      type: Number,
      default: 0
    },
    step: {
      type: Number,
      default: 1
    }
  },
  data () {
    return {
      currentValue: this.value
    }
  },
  methods: {
    handleChange (mark) {
      let val = this.currentValue + mark * this.step
      val = val > this.max ? this.max : val
      val = val < this.min ? this.min : val
      this.$emit('input', val)
    }
  },
  watch: {
    value (val) {
      this.currentValue = val
      this.$emit('change', this.currentValue)
    }
  }
}
</script>

<style lang="scss" scoped>
  .count {
    width: 2.3375rem;
    line-height: .575rem;
    display: flex;
    text-align: center;
    border: .0125rem solid #e7e7e7;/*no*/
    font-size: .3125rem;
    color: #333;
    float: right;
    i {
      width: .7rem;
      height: .575rem;
      font-style: normal;
      font-size: .45rem;
      &:first-child {
        border-right: .0125rem solid #e7e7e7;/*no*/
      }
      &:last-child {
        border-left: .0125rem solid #e7e7e7;/*no*/
      }
    }
    span {
      flex: 1;
    }
  }
</style>
